<template>
    <div class="h-full">
        <video ref="videoRef" id="video" :src="mvInfo.url" autoplay controls class="w-full h-full bg-slate-100" @load="videoLoad">
            
        </video>
    </div>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../../store'
import { useRoute } from 'vue-router'
import { onMounted, computed ,useTemplateRef} from 'vue'
const route = useRoute()

const { videosStore } = useStore()
const { mvInfo } = storeToRefs(videosStore)
const mvId = computed(() => Number(route.query.id))
const videoRef = useTemplateRef<HTMLVideoElement>('videoRef')

onMounted(async () => {
    getMvInfo()
})
const videoLoad = () => {
    if (!videoRef.value) return
    videoRef.value?.addEventListener('ended', () => {
        videoRef.value?.load()
    })
    videoRef.value?.play()
}
const getMvInfo = async () => {
    if (!mvId.value) return
    await videosStore.getMvInfo(mvId.value)
}
</script>
